<!---
  * 表演曲目 下拉选择框
  *
  * @Author:    1024创新实验室：罗伊
  * @Date:      2022-09-12 22:06:45
  * @Wechat:    zhuda1024
  * @Email:     lab1024@163.com
  * @Copyright  1024创新实验室 （ https://1024lab.net ），Since 2012
  *
-->
<template>
  <div>
    <a-select
        v-model:value="selectValue"
        :style="`width: ${width}`"
        :placeholder="props.placeholder"
        :showSearch="true"
        :allowClear="true"
        :size="size"
        mode="multiple"
        @change="onChange"
    >
      <a-select-option v-for="item in performanceTypeList" :key="item.id" :value="item.id">
        {{ item.performanceType }}
      </a-select-option>
    </a-select>
  </div>
</template>

<script setup>
import {computed, onMounted, ref, watch} from 'vue';
import {rolandPerformanceTypeApi} from '/@/api/business/roland-performance-type/roland-performance-type-api';

const props = defineProps({
  value: [Array, String],
  placeholder: {
    type: String,
    default: '请选择表演曲目',
  },
  width: {
    type: String,
    default: '100%',
  },
  size: {
    type: String,
    default: 'default',
  },
  // 禁用标识
  disabledFlag: {
    type: Number,
    default: null,
  },
});

// -------------------------- 查询 字典数据 --------------------------

const performanceTypeList = ref([]);

async function queryDict() {
  let responseModel = await rolandPerformanceTypeApi.queryAll();
  performanceTypeList.value = responseModel.data;
}

onMounted(queryDict);

// -------------------------- 选中 相关、事件 --------------------------
const emit = defineEmits(['update:value', 'change']);
const selectValue = ref(props.value);
watch(
    () => props.value,
    (newValue) => {
      selectValue.value = newValue;
    }
);

function onChange(value) {
  emit('update:value', value);
  emit('change', value);
}
</script>
